{% extends "base.jinja2" %}

{# PRE-HEADER#}
{% block pre_header %}

    <link rel="stylesheet"
          href='{{ request.static_url("stalker_pyramid:static/ace/css/fullcalendar.css") }}'/>
    <link rel="stylesheet"
          href='{{ request.static_url("stalker_pyramid:static/ace/css/bootstrap-timepicker.css") }}'/>
    <link rel="stylesheet"
          href='{{ request.static_url("stalker_pyramid:static/ace/css/datepicker.css") }}'/>
    <link rel="stylesheet"
          href='{{ request.static_url("stalker_pyramid:static/ace/css/daterangepicker.css") }}'/>
{% endblock pre_header %}

{#SIDEBAR#}
{% block sidebar %}

    {% include 'sidebar.jinja2' %}

{% endblock sidebar %}


{#BREADCRUMBS#}
{% block breadcrumbs %}

    {% set page_title='Vacations' %}
    {% include 'breadcrumb/breadcrumbs.jinja2' %}

{% endblock breadcrumbs %}

{#PAGE-CONTENT#}
{% block page_content %}

    {% set page_title='Vacations' %}
    {% include 'page_header.jinja2' %}
    <!--/.page-header-->

    <div class="row-fluid">

        <div class="span12">
            <!--PAGE CONTENT BEGINS-->

            <div class="row-fluid">
                <div class="span9">

                    <div class="space"></div>
                    <div id="calendar"></div>

                </div>

                <div class="span3">

                    <div class="row-fluid">
                        <div id="vacations_box"
                             class="widget-box hide">
                            <div class="widget-header header-color-orange">
                                <h4 class="smaller"><i class="icon-sun"></i>Vacation Types</h4>
                            </div>
                            <div class="widget-body">
                                <div class="widget-main padding-12">
                                    <div id="vacation_tree"
                                         class="tree"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--PAGE CONTENT ENDS-->
        </div>
        <!--/.span-->
    </div>

{% endblock page_content %}

<!--page specific plugin scripts-->
{#EXTRA-SCRIPTS#}
{% block extrascripts %}


    {% set event_type='Vacation' %}

    {% include 'calendar/calendar.jinja2' %}
    {% include 'components/tree.jinja2' %}

    <script type="text/javascript">
        $(document).ready(function () {

            $.getJSON('/entities/{{ entity.id }}/events/?keys=vacation').then(function (data) {
                var events = [];
                var vacations_types = new Object();

                for (var i = 0; i < data.length; i++) {
                    var start_date = new Date(parseInt(data[i].start));
                    var end_date = new Date(parseInt(data[i].end));

                    var event = {
                        eId: data[i].id,
                        entity_type: data[i].entity_type,
                        title: data[i].title,
                        start: start_date,
                        end: end_date,
                        className: data[i].className,
                        allDay: data[i].allDay
                    };

                    var vtype = data[i].title;

                    //console.debug(vacations_types)

                    end_date.setHours(0);
                    start_date.setHours(0);

                    var total_day = (end_date.getTime()-start_date.getTime())/1000/3600/24 + 1;

                    if (!vacations_types [vtype]) {
                        vacations_types [vtype] = {
                            'name': data[i].title,
                            'type': 'folder',
                            'icon-class': 'blue',
                            'total_day': 0
                        }
                    }

                    vacations_types [vtype].total_day +=total_day
                    vacations_types [vtype].name = data[i].title +' ( '+ vacations_types [vtype].total_day + ' days)'

                    if (!vacations_types [vtype]['additionalParameters']) {
                        vacations_types [vtype]['additionalParameters'] = new Object();
                        vacations_types [vtype]['additionalParameters']['children'] = new Object();
                    }

                    vacations_types [vtype]['additionalParameters']['children'][(data[i].id).toString()] = {name: '<span  class="pull-left">'+ start_date.format('yyyy-mm-dd') +' - '+end_date.format('yyyy-mm-dd')+' ( '+total_day+' days )' +'</span>', type: 'item'}

                    $('#vacations_box').show();
                    events.push(event);
                }

                drawCalendar('calendar', events);
                drawTree('vacation_tree', vacations_types);
            });
        });
    </script>


{% endblock extrascripts %}
